<template>
    <transition
        name="custom-classes-transition"
        enter-active-class="animated rollIn"
        leave-active-class="animated rollOut"
    >
        <div v-if="showflag">
            <div class="login">
                <div class="info-con">
                    <img src="../../../static/images/title.png" alt="">
                </div>
                <div class="login-con">
                    <el-card class="box-card">
                        <div class="title">
                            钱大妈中台管理系统
                        </div>
                        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="login-ruleForm">
                            <el-form-item prop="accountNo">
                                <el-input v-model="ruleForm.accountNo" prefix-icon="el-icon-setting" placeholder="请输入用户名"></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input type="password" v-model="ruleForm.password" prefix-icon="el-icon-setting" placeholder="请输入密码"></el-input>
                            </el-form-item>
                            <div>
                                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                                <el-button @click="resetForm('ruleForm')">重置</el-button>
                            </div>
                        </el-form>
                    </el-card>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
import { login } from "@/common/service/login/login.js";
export default {
    name: "login",
    data() {
        return {
            showflag: false,

            ruleForm: {
                accountNo: "liangshaofeng",
                password: "123456"
            },
            rules: {
                accountNo: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur"
                    }
                ],
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    mounted() {
        this.show()
    },
    methods: {
        show(){
            this.showflag = !this.showflag;
        },
        // 登录
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this._login();
                } else {
                    return false;
                }
            });
        },
        // 执行登录
        _login() {
            login(this.ruleForm)
                .then(res => {
                    // var nav = res.menuList;
                    // var navInfo = [];
                    // nav.forEach((item,index) => {
                    //     var navItem = {};
                    //     navItem.id = index + '1';
                    //     navItem.path = '/';
                    //     navItem.name = item.menuName;
                    //     navItem.iconCls = item.iconCls;
                    //     var navChildren = item.menuList;
                    //     var navChildrenArr = [];
                    //     navChildren.forEach((item1,index) => {
                    //         var navChildrenItem = {};
                    //         navChildrenItem.id = item1.menuUrl;
                    //         navChildrenItem.path = item1.menuUrl;
                    //         navChildrenItem.name = item1.menuName;
                    //         navChildrenArr.push(navChildrenItem);
                    //     });
                    //     navItem.children = navChildrenArr;
                    //     navInfo.push(navItem);
                    // });
                    // var navList = JSON.stringify(navInfo);
                    // localStorage.setItem("nav", navList);

                    var navInfo = res.menuList;
					localStorage.setItem('nav', JSON.stringify(navInfo));
                    localStorage.setItem("token", res.accessToken);
                    localStorage.setItem("userInfo", JSON.stringify(res));
                    //友好提示
                    this.$message.success("登录成功");
                    this.show();
                    var self = this;
                    setTimeout(function(){
                        //登录成功后跳转到指定页面
                        self.$router.push("/index");
                    },1000)
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },
        // 重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
}
.login::before {
    z-index: -999;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(../../../static/images/loginBg.png);
    background-size: cover;
}
.title {
    text-align: center;
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #409eff;
}
.login-ruleForm {
    width: 300px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}
</style>
